<template>
  <div>

    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media">
				<router-link to='/home/newsinfo/1'>
					<img class="mui-media-object mui-pull-left" src="../../images/menu1.png">
					<div class="mui-media-body">
						<h1>幸福</h1>
						<p class='mui-ellipsis'>
              <span>发表时间：2012-12-12</span>
              <span>点击：1次</span>
            </p>
					</div>
				</router-link>
			</li>
      <li class="mui-table-view-cell mui-media">
				<router-link to='/home/newsinfo/2'>
					<img class="mui-media-object mui-pull-left" src="../../images/menu1.png">
					<div class="mui-media-body">
						<h1>幸福</h1>
						<p class='mui-ellipsis'>
              <span>发表时间：2012-12-12</span>
              <span>点击：1次</span>
            </p>
					</div>
				</router-link>
			</li>
      <li class="mui-table-view-cell mui-media">
				<router-link to='/home/newsinfo/3'>
					<img class="mui-media-object mui-pull-left" src="../../images/menu1.png">
					<div class="mui-media-body">
						<h1>幸福</h1>
						<p class='mui-ellipsis'>
              <span>发表时间：2012-12-12</span>
              <span>点击：1次</span>
            </p>
					</div>
				</router-link>
			</li>
      
      
       
				<li class="mui-table-view-cell mui-media" v-for='(item,i) in newslist' :key='i'>
					<router-link :to="'/home/newsinfo' + item.id">
						<img class="mui-media-object mui-pull-left" src="item.img_url">
						<div class="mui-media-body">
							<h1>{{  item.title  }}</h1>
							<p class='mui-ellipsis'>
                <span>发表时间：{{ item.add_time | dataFormat('YYYY-MM-DD HH:mm:ss') }}</span>
                <span>点击：{{ item.click}}次</span>
              </p>
						</div>
					</router-link>
				</li>
			</ul>
    <h3>新闻列表组件</h3>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        newslist:[] //默认在页面上挂在一个空数组，表示新闻列表
      };
    },
    created(){
      // 每当页面加载的时候，就获取数据
      this.getNewsList();
    },
    methods: {
      getNewsList(){
        // 获取新闻列表
        const { data } = this.$http.get('/api/getnewslist')

        if(data.status === 0) return this.newslist = data.message
      }
    }
  }
</script>
<style lang="scss" scoped>
  .mui-media-body {
    h1 {
      font-size: 14px;
    }
    .mui-ellipsis{
      color: #26A2ff;
      display: flex;
      justify-content: space-between;
      font-size: 13px;
    }
  }
</style>